<template>
  <div></div>
</template>

<script>
  import * as THREE from 'three'
  import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
  import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min'

  export default {
    name: 'TwelveTwo',
    data() {
      return {
        cube: null,                     // 立方体对象
      }
    },
    mounted() {
      this.initScene();
      this.initCamera();
      this.initRenderer();
      this.addCube();
      this.addAxesHelper();
      this.addOrbitControls();
      this.animation();
      this.initControl();
      this.listen();
    },
    methods: {
      // 初始化场景
      initScene() {
        this.scene = new THREE.Scene();
      },
      // 初始化相机
      initCamera() {
        // 创建一个相机 视点
        this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        // 设置相机的位置
        this.camera.position.x = 2;
        this.camera.position.y = 2;
        this.camera.position.z = 5;
        this.camera.lookAt(0, 0, 0);
      },
      // 初始化渲染器
      initRenderer() {
        // 创建一个渲染器
        this.renderer = new THREE.WebGLRenderer();
        // 设置渲染器尺寸
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(this.renderer.domElement);
      },
      // 添加一个立方体
      addCube() {
        const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
        const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, side: THREE.FrontSide });
        this.cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        // 添加父元素到场景里
        this.scene.add(this.cube);
      },
      // 添加世界坐标辅助器
      addAxesHelper() {
        const axesHelper = new THREE.AxesHelper(50);
        this.scene.add(axesHelper);
      },
      // 添加轨道控制器
      addOrbitControls() {
        this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement);
        // 设置带阻尼的惯性
        this.orbitControls.enableDamping = true;
        // 设置阻尼系数
        this.orbitControls.dampingFactor = 0.05;
      },
      // 动画函数
      animation() {
        this.orbitControls.update();
        // 渲染
        this.renderer.render(this.scene, this.camera);
        requestAnimationFrame(this.animation);
      },
      // 初始化lil.gui调试工具
      initControl() {
        const gui = new GUI();

        const params = {
          color: this.cube.material.color,
          wireframe: this.cube.material.wireframe,
          transparent: this.cube.material.transparent,
          opacity: this.cube.material.opacity,
          visible: this.cube.material.visible,
        }

        let folder = gui.addFolder('基础网格材质属性');
        folder.addColor(params, 'color').name('color-颜色').onChange(val => {
          this.cube.material.color = val
        })
        folder.add(params, 'wireframe').name('wireframe-是否线框').onChange(val => {
          this.cube.material.wireframe = val
        })
        folder.add(params, 'transparent').name('transparent-是否透明').onChange(val => {
          this.cube.material.transparent = val
        })
        folder.add(params, 'opacity', 0, 1).step(0.1).name('opacity-透明度').onChange(val => {
          this.cube.material.opacity = val
          console.log(this.cube.material)
        })
        folder.add(params, 'visible').name('visible-是否可见').onChange(val => {
          this.cube.material.visible = val
        })
      },
      listen() {
        // 监听窗口变化
        window.addEventListener('resize', () => {
          // 重置渲染器宽高比
          this.renderer.setSize(window.innerWidth, window.innerHeight);
          // 重置相机宽高比
          this.camera.aspect = window.innerWidth / window.innerHeight;
          // 更新相机投影矩阵
          this.camera.updateProjectionMatrix();
        })
      }
    }
  }
</script>

<style scoped>

</style>
